<template>
  <div>
    <div style="display: flex; align-items: center; justify-content: flex-end">
      <!-- <h5 style="flex: 1">&nbsp;&nbsp; &nbsp;汇集日志管理</h5> -->
      <el-row>
        <el-col :span="7">
          <el-select v-model="getQueryObject.status" placeholder="请选择运行状态" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-col>
        <el-col :offset="1" :span="4">
          <el-date-picker v-model="timevalue1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-col>
      </el-row>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="searchCLIkc">
        {{ $t('table.search') }}
      </el-button>

      <el-button v-waves class="filter-item" icon="el-icon-refresh" @click="handleRest">{{ $t('table.rest') }}</el-button>

      <!-- <el-button icon="el-icon-search" @click="searchCLIkc"></el-button> -->
    </div>
    <el-table :data="tableData" max-height="890">
      <el-table-column prop="executeJobId" label="任务编排编号" align="center" width="180"> </el-table-column>
      <el-table-column prop="executeJobName" label="任务编排名称" align="center" width="180"> </el-table-column>
      <el-table-column prop="executeTime" label="实际触发时间" align="center" width="180"> </el-table-column>
      <el-table-column prop="runTime" label="运行时长" align="center" width="180"> </el-table-column>
      <el-table-column prop="status" label="运行状态" align="center" width="180">
        <template slot-scope="{ row }">
          <div v-if="row.status == 0"><span style="display: inline-block; background: yellow; width: 10px; height: 10px; border-radius: 5px"></span>运行中</div>
          <div v-if="row.status == 1"><span style="display: inline-block; background: green; width: 10px; height: 10px; border-radius: 5px"></span>运行成功</div>
          <div v-else-if="row.status == 2"><span style="display: inline-block; background: red; width: 10px; height: 10px; border-radius: 5px"></span>运行失败</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { DataExtractionTaskLog } from '@/api/dataextraction/offlineTaskLog.js'
export default {
  data() {
    return {
      tableData: [],
      timevalue1: [],
      getQueryObject: {
        status: '',
        startTime: '',
        endTime: '',
        limit: '',
      },
      options: [
        {
          label: '运行中',
          value: 0,
        },
        {
          label: '运行成功 ',
          value: 1,
        },
        {
          label: '运行失败',
          value: 2,
        },
      ],
    }
  },
  mounted() {
    this.getDataApi()
  },
  methods: {
    searchCLIkc() {
      if (this.timevalue1 == null) {
        this.timevalue1 = []
      }
      if (this.timevalue1.length > 0) {
        this.getQueryObject.startTime = this.$dayjs(this.timevalue1[0]).format('YYYY-MM-DD')
        this.getQueryObject.endTime = this.$dayjs(this.timevalue1[1]).format('YYYY-MM-DD')
      } else {
        this.getQueryObject.endTime = ''
        this.getQueryObject.startTime = ''
      }
      this.getQueryObject.page = 1
      this.getQueryObject.limit = this.$store.getters.defaultPageSize
      this.getDataApi()
    },
    //重置
    handleRest() {
      this.getQueryObject.page = 1
      this.getQueryObject.limit = this.$store.getters.defaultPageSize
      this.getQueryObject.startTime = undefined
      this.getQueryObject.endTime = undefined
      this.getQueryObject.status = undefined
      this.timevalue1 = []
      this.getDataApi()
    },
    getDataApi() {
      console.log(this.getQueryObject)
      DataExtractionTaskLog(this.getQueryObject).then((res) => {
         
        if (res.data.code == 0) {
          this.tableData = res.data.data
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep(.el-range-editor--medium .el-range-separator) {
  width: 35% !important;
}
</style>
